import React, { useEffect, useState, useRef } from 'react'
import {
    Modal, Form,
    Input,
     Button, message
} from 'antd';
import AliyunOSSUpload from '../Upload';
import { post } from '../../util/post'

export default function EditStoreModal(props) {
    const [imgData, setImgData] = useState('')
    const [form, setForm] = useState()
    const [id,setId] = useState('')
    const ref = useRef()
    const { visible, setVisible } = props;
    const token = localStorage.getItem('TOKEN')
    useEffect(() => {
            const { address,name,phone,image,id } = props.data
            if(props.visible)
            {
                ref.current.setFieldsValue({
                    name,
                    address,
                    phone,
                })
                setImgData(image)
                setId(id);
            }
            
            // console.log(imgRef.current)
            // imgRef.current.init([defaultImg])
    }, [props])
    const handleOk = () => {
        setVisible(false);
    };
    const changeImgList = (a) => {
        if (a.length !== 0) {
            const s = 'https://onlineorder.oss-cn-shenzhen.aliyuncs.com/' + a[0].url
            setImgData(s);
        }
        else setImgData('')
    }
    const handleCancel = () => {
        setVisible(false);
    };
    const onFinish = async (data) => {
        data.image = imgData
        data.id=id;
        console.log('onfinish', data)
        const res = await post('/shop/shop/update',data,token)
        console.log(res)
        if(res.data.code===0){
            message.success('成功')
            setVisible(false)
        }
        else{
            message.error(res.data.msg)
        }
    }
    return (
        <div>
            <Modal title="修改店铺信息" 
            visible={visible} 
            onOk={handleOk} 
            onCancel={handleCancel}
            footer={null}
            >
            <Form
                labelCol={{ span: 4, }}
                wrapperCol={{ span: 14, }}
                layout="horizontal"
                onFinish={onFinish}
                ref={ref}
            >
                <Form.Item
                    name="name"
                    label="门店名称"
                    rules={[
                        {
                            required: true,
                            message: '请输入门店名称',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="phone"
                    label="门店电话"
                    rules={[
                        {
                            required: true,
                            message: '请输入门店电话',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="address"
                    label="门店地址"
                    rules={[
                        {
                            required: true,
                            message: '请输入门店地址',
                        },
                    ]}
                >
                    <Input
                        style={{
                            width: '100%',
                        }}
                    />
                </Form.Item>
                <Form.Item label={"图片"} name={'image'}>
                    <AliyunOSSUpload value={imgData} changeImgList={(data)=>changeImgList(data)}/>
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        提交申请
                    </Button>
                </Form.Item>
            </Form>
            </Modal>
        </div>
    )
}
